<template>
  <div class="list">
    <div class="listBox center">
      <div class="card">
        <div class="cardTop title aliCenter">Store Information</div>
        <div class="cardContent">
          <el-row>
            <el-col :span="10">
              <div class="qualityImg">
                <img v-if="storeInfo.head" :src="storeInfo.head" alt="" srcset="" />
                <div class="img"></div>
              </div>
            </el-col>
            <el-col :span="14">
              <el-col :span="24" class="col size2">
                <div>Store Name:{{ storeInfo.name }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Contact Persor:{{ storeInfo.linkman }}</div>
              </el-col>
              <el-col :span="24" class="col size2">
                <div>Contact Number:{{ storeInfo.phone }}</div>
              </el-col>
            </el-col>
          </el-row>
        </div>
        <div class="button Consigness" @click="SelectStoreFn">Select</div>
        <!-- <div class="button Rejection">Rejection</div> -->
      </div>
    </div>
    <!-- <div class="listBotton center">
      <div class="botton" @click="addVehicleFn">添加</div>
    </div> -->
  </div>
  <div class="list">
    <div class="listBox center">
      <div class="card">
        <div class="cardTop title aliCenter">Product information</div>
        <div class="cardContent2">
          <el-row>
            <el-col :span="24" class="col size2" v-for="(item, index) in filmList" :key="index">
              <span class="colTitle">Warranty Serial Number: </span>
              <el-select
                filterable
                v-model="item.startNumber"
                size="large"
                class="inpute1"
                @change="getFilmData(index, item.startNumber)"
                placeholder="Search"
              >
                <el-option
                  v-for="item in optionsFilmS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
              <div v-if="index != 0" class="PictureRecognitionClear center" @click="ClearFn(index)">
                Delete
              </div>
            </el-col>
            <!-- <el-col :span="24" class="col size2">
              <span style="flex: 1">Ending Number： </span>
              <el-select
                @change="getFilmData(formData.endNumber)"
                v-model="formData.endNumber"
                size="large"
                class="inpute1"
                style="flex: 6"
              >
                <el-option
                  v-for="item in optionsFilmS"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Shipping Address： </span>
              <el-input style="flex: 6" class="inpute1" v-model="formData.shippingAddress" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Product Type： </span>
              <el-input style="flex: 6" class="inpute1" v-model="formData.filmType" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Product Name： </span>
              <el-input style="flex: 6" class="inpute1" v-model="formData.filmName" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Paint Protection Film Usage Count： </span>
              <el-input style="flex: 3" class="inpute1" v-model="formData.lacquerNumber" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Vinyl Wrap Usage Count：</span>
              <el-input style="flex: 4" class="inpute1" v-model="formData.colorAlterationNumber" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1">Window Film Usage Count：</span>
              <el-input style="flex: 4" class="inpute1" v-model="formData.roofNumber" />
            </el-col>
            <el-col :span="24" class="col size2">
              <span style="flex: 1"> Sunroof PPF Usage Count：</span>
              <el-input style="flex: 4" class="inpute1" v-model="formData.sunNumber" />
            </el-col> -->
            <el-col :span="24" class="col center" style="margin-bottom: 50px">
              <div class="center">
                <div class="button2 Consigness" @click="AddNumberFN">Add</div>
              </div>
            </el-col>
            <el-col :span="24" class="col center">
              <div class="center">
                <div class="button2 Consigness" @click="ConfirmFn">Ship</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
  </div>
  <!-- 选择门店 -->
  <el-dialog v-model="dialogVisible" class="cardDialog" :show-close="false">
    <selectStore @getStoreList="getStoreList"></selectStore>
  </el-dialog>
  <!-- 提示可以发货的编号 -->
  <el-dialog v-model="dialogVisibleNumber" class="cardDialog" width="300">
    <div class="numberBox">
      <div class="center">
        <div
          :class="item.type == 0 ? 'scu' : 'err'"
          v-for="(item, index) in titleNumber"
          :key="index"
        >
          {{ item.label }}
        </div>
      </div>
      <div class="center">请发货绿色编号</div>
    </div>
  </el-dialog>
</template>

<script setup>
import { Delete, Search } from '@element-plus/icons-vue'
import { filmDetilsNumber, storeInventoryAddSamll, storeInventoryUnUse } from '@/http/api/my.js'
import selectStore from './selectStore.vue'
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
let dialogVisible = ref(false)
let formData = reactive({})
let storeInfo = reactive({})
let inputFile = ref(null)
let upImg = ref('')
let radioData = ref([
  {
    title: 'Use',
    select: true
  },
  {
    title: 'Unuse',
    select: false
  }, {
    title: 'Run out',
    select: false
  }
])
let filmList = ref([{
  startNumber: '',
  endNumber: '',
  filmType: '',
  filmName: '',
  filmAge: '',
  lacquerNumber: '',
  roofNumber: '',
  sunNumber: '',
  colorAlterationNumber: '',
  count: '',
  shippingAddress: '',

}])
let selectRdio = ref(0)
onMounted(() => {
  getFilm()
})
const selectFn = (number) => {
  selectRdio.value = number
  radioData.value.forEach((item, index) => {
    if (index == number) {
      item.select = true
    } else {
      item.select = false
    }
  })
}
const AddNumberFN = () => {
  filmList.value.push({
    startNumber: '',
    endNumber: '',
    shippingAddress: '',
    filmType: '',
    filmName: '',
    filmAge: '',
    lacquerNumber: '',
    roofNumber: '',
    sunNumber: '',
    colorAlterationNumber: '',
    count: '',
  })
}
let optionsFilmS = ref([])
// 获取库存的膜
const getFilm = async () => {
  let storeId = JSON.parse(localStorage.getItem('storeInfo')).id
  let data = {
    page: 1,
    size: 100000,
    storeId,
    deliverStatus: 1,
    serchData: ''
  }
  const res = await storeInventoryUnUse(data)
  optionsFilmS.value = res.res.map((item) => {
    return {
      lable: item.filmNo,
      value: item.filmNo
    }
  })
}
// const magnifyFn = () => {
//   dialogVisibleMagnifyFn.value = true
// }
// const addVehicleFn = () => {
//   dialogVisibleAddVehicleFn.value = true
// }
const upImgFn = () => {
  inputFile.value.addEventListener('change', async function (event) {
    var files = event.target.files[0]
    const formData = new FormData()
    //files 文件信息
    formData.append("uploadFiles", files)
    //提交的其他字段
    // 发送ajax请求
    const res = await uploadAvatar(formData)
    upImg.value = res.image_url

  })
  // 将input添加到文档中
  // document.body.appendChild(input);
  inputFile.value.click()
}

const deleteImgFn = () => {
  upImg.value = ''
}
const SelectStoreFn = () => {
  dialogVisible.value = true
}
let selectStoreData = {}
const getStoreList = (data) => {
  dialogVisible.value = false
  selectStoreData = data
  Object.assign(storeInfo, data)
  selectStoreData.shippingAddress = JSON.parse(data.region).join(',') + ',' + data.address
}
// 根据质保批号以及门店获取膜信息
const getFilmData = async (filmListIndex, data) => {
  let storeId = JSON.parse(localStorage.getItem('storeInfo')).id
  if (storeInfo.id) {
    const res = await filmDetilsNumber({
      storeId: storeId,
      filmNo: data
    })
    filmList.value[filmListIndex].filmType = res.res.filmType
    filmList.value[filmListIndex].filmAge = res.res.filmAge
    filmList.value[filmListIndex].filmName = res.res.filmName
    filmList.value[filmListIndex].filmId = res.res.filmId
    filmList.value[filmListIndex].lacquerNumber = res.res.lacquerNumber
    filmList.value[filmListIndex].roofNumber = res.res.roofNumber
    filmList.value[filmListIndex].sunNumber = res.res.sunNumber
    filmList.value[filmListIndex].count = res.res.count
    filmList.value[filmListIndex].colorAlterationNumber = res.res.colorAlterationNumber
  } else {
    ElMessage.error('Please select a store.')
    filmList.value[filmListIndex] = {}
  }

}
const ClearFn = (index) => {
  filmList.value.splice(index, 1)
}
let titleNumber = ref([])
let dialogVisibleNumber = ref(false)
const ConfirmFn = async () => {
  titleNumber.value = []
  let StoreInfo = JSON.parse(localStorage.getItem('storeInfo'))
  try {

    filmList.value.forEach(async (item, index) => {
      if (item.deliverStoreId == storeInfo.id) {
        throw '自己无法给自己发货'

      }
      item.deliverStoreId = StoreInfo.id
      item.deliverStoreName = StoreInfo.name
      item.deliverStorePhone = StoreInfo.phone
      item.linkman = storeInfo.linkman
      item.storeName = selectStoreData.storeName
      item.linkman = selectStoreData.linkman
      item.shippingAddress = selectStoreData.shippingAddress
      item.storeId = selectStoreData.id
      item.endNumber = item.startNumber
      const res = await storeInventoryAddSamll(item)
    })

    setTimeout(() => {
      ElMessage.success('success')
    }, 500)




    // if (res.type == 0) {
    //   // ElMessage.error(res.res.join(',') + '编号已使用或无此编号')
    //   dialogVisibleNumber.value = true
    //   let start = formData.startNumber.slice(-2) * 1
    //   let end = formData.endNumber.slice(-2) * 1
    //   let numberStr = formData.startNumber.slice(0, -2)
    //   let filmNo = []
    //   dialogVisibleNumber.value = true
    //   if (start == end) {
    //     titleNumber.value.push({
    //       label: formData.startNumber,
    //       type: 1
    //     })
    //   } else {
    //     for (let i = 1; i <= end; i++) {
    //       if (i < 10 && i >= start) {
    //         filmNo.push(`${numberStr}0${i}`)
    //       } else if (i > 10 && i >= start) {
    //         filmNo.push(`${numberStr}${i}`)
    //       }
    //     }
    //     titleNumber.value = res.res
    //   }
    // } else {
    //   ElMessage.success('successfully added')
    // }
    // const keys = Object.keys(formData)
    // let obj = {}
    // keys.forEach((item) => {
    //   obj[item] = ""
    // })
    // Object.assign(formData, obj)

  } catch (error) {
    ElMessage.error(error)
  }

}
</script>

<style lang="scss" scoped>
.colTitle {
  width: 300px;
}
.inpute1 {
  width: 1200px;
}

.PictureRecognitionClear {
  margin-left: 10px;
  width: 190px;
  height: 37px;
  background: #ff0000;
  border-radius: 10px;
  font-size: 20px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.numberBox {
  min-height: 200px;
  padding: 10px;
}
.scu {
  color: #67c23a;
}
.err {
  color: #f56c6c;
}
.cardDialog {
  padding: 0;
  width: 800px !important;
  overflow: hidden;
}
.listBox {
  width: 100%;
  margin-top: 45px;
  .card {
    width: 1800px;
    border-radius: 20px;
    overflow: hidden;
    background: #1a1c1d;
    position: relative;
    .cardTop {
      height: 100px;
      width: 100%;
      background: #ffdd00;
      padding: 0 20px;
      font-weight: bold;
      color: black;
    }
    .cardContent {
      padding: 40px 20px;
      font-size: 24px;
      color: white;
      height: 500px;
    }
  }
}
.cardContent2 {
  padding: 40px 20px;
  font-size: 24px;
  color: white;
  height: 750px;
}
.listBotton {
  width: 100%;
  .botton {
    width: 170px;
    height: 70px;
    background: #ffdd00;
    font-weight: bold;
    font-size: 18px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    color: black;
    margin-top: 20px;
  }
  .botton:active {
    background: black;
    color: white;
  }
}
.AddVehiclenCard {
  width: 1800px;
  height: 400px;
  border-radius: 20px;
  overflow: hidden;
  background: #1a1c1d;
  .AddVehiclenCardTop {
    height: 100px;
    width: 100%;
    background: #ffdd00;
    font-size: 24px;
    padding: 0 20px;
    font-weight: bold;
    color: black;
  }
}
.AddVehiclenCardContent {
  display: flex;
  padding: 10px;
  .left {
    margin-right: 30px;
    margin-left: 50px;
  }
}
.upImg {
  background: #3c3c3c;
  width: 260px;
  height: 260px;
  border-radius: 20px;
  font-size: 50px;
  cursor: pointer;
}

.imgBox {
  width: 260px;
  height: 260px;
  border-radius: 20px;
  position: relative;
  left: 0;
  top: 0;
  img {
    width: 100%;
    height: 100%;
  }
  .Mask {
    background: black;
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: space-around;
    font-size: 30px;
  }
  .Mask:hover {
    opacity: 0.6;
  }
  cursor: pointer;
}

.bakImg {
  width: 800px;
  height: 800px;
  img {
    width: 100%;
    height: 100%;
  }
}
::v-deep .el-input__inner {
  color: #ffdd00;
}
::v-deep .el-form-item__label {
  font-size: 30px;
  color: white;
}
::v-deep .el-radio__input.is-checked .el-radio__inner {
  background: #ffdd00;
  border: #ffdd00;
}
::v-deep .el-radio__input .is-checked {
  color: white !important;
  font-size: 24px;
}
.col {
  width: 100%;
  height: 40px;
  margin-top: 20px;
  display: flex;
}
::v-deep .el-radio__label {
  color: white !important;
  font-size: 24px;
}
::v-deep .el-input {
  height: 40px;
}
::v-deep .el-input__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
::v-deep .el-select__wrapper {
  background: #242424 !important;
  border: 1px solid rgb(255, 221, 0);
  box-shadow: 0 0 !important;
}
.cofimButton {
  width: 220px;
  height: 70px;
  background: #ffdd00;
  border-radius: 20px;
  font-size: 30px;
  font-weight: bold;
  color: black;
  cursor: pointer;
}
.cofimButton:active {
  background: black;
  color: white;
}
.qualityImg {
  width: 550px;
  height: 380px;
  border: 1px solid #ffdd00;
  img {
    width: 100%;
    height: 100%;
  }
  .img {
    width: 100%;
    height: 100%;
    background: #242424;
  }
}
.button {
  width: 180px;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 10px;
  right: 50px;
  border-radius: 20px;
  font-weight: bold;
  font-size: 22px;
  color: black;
}
.button2 {
  width: 180px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 20px;
  font-weight: bold;
  font-size: 22px;
  color: black;
  cursor: pointer;
  margin-top: 40px;
}
.Consigness {
  background: #ffdd00;
}
.Rejection {
  background: #ff1f1f;
}
.rdioSelect {
  margin-top: 50px;
  margin-left: 50px;
  margin-bottom: 50px;
  .rdio {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #ffdd00;
    margin-right: 20px;
  }
  .rdio2 {
    font-weight: bold;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: white;
    margin-right: 20px;
  }
}
.inputSerachBox {
  padding-left: 50px;
  position: relative;
  cursor: pointer;
}
.inputSerachBox2 {
  cursor: pointer;
  width: 750px;
  height: 70px;
  border-radius: 20px;
  background: white;
}
.blackCircle {
  background: black;
  width: 60px;
  height: 60px;
  border-radius: 30px;
  position: absolute;
  left: 720px;
  top: 50%;
  transform: translateY(-50%);
}
.RigthIcon {
  font-size: 25px;
}
::v-deep .el-input__inner {
  color: white;
  font-size: 22px;
}
::v-deep .el-select__selected-item {
  color: white;
  font-size: 22px;
}
</style>